<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>问卷管理界面</span>
          <el-button class="button" type="primary" @click="btnAddDialog"
            >添加</el-button
          >
        </div>
      </template>
      <!-- 查询 -->
      <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
        <el-form-item label="问卷名称">
          <el-input
            v-model="frmQuery.t3_context"
            placeholder="请问卷名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="问卷类型" :label-width="formLabelWidth">
                   
          <el-select v-model="frmQuery.ts_uid" placeholder="请选择问卷类型">
                      <el-option label="---请选择类型---" value=""></el-option>  
                   
            <el-option
              v-for="testselect in classData"
              :key="testselect.ts_uid"
              :label="testselect.ts_class"
              :value="testselect.ts_uid"
            />
                             
          </el-select>
               
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="t3_context" label="问卷名称" width="150" />
        <el-table-column prop="ts_class" label="问卷类型" width="150" />
        <el-table-column prop="t3_answer1" label="答案1" width="150" />
        <el-table-column prop="t3_answer2" label="答案2" width="150" />
        <el-table-column fixed="right" label="操作" width="">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="updateDialog(scope.row.t3_uid)"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              title="确定要删除吗？"
              @confirm="deleteClick(scope.row.t3_uid)"
            >
              <template #reference>
                <el-button link type="warning" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
        <!-- 分页 -->
        <el-pagination 
      :currentPage="currentPage" 
      :page-size="pageSize" 
      :page-sizes="[5, 10, 20, 30, 40]" 
      :background="true"
      layout="total, sizes, prev, pager, next, jumper" 
      :total="pageInfo.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    </el-card>
    <!-- 添加-->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
      <el-form :model="form">
        <el-form-item label="问卷问题" :label-width="formLabelWidth">
          <el-input v-model="form.t3_context" autocomplete="off" />
        </el-form-item>
        <el-form-item label="问卷类别" :label-width="formLabelWidth">
          <el-select v-model="form.ts_uid" placeholder="选择类别">
            <el-option
              v-for="testselect in classData"
              :key="testselect.ts_uid"
              :label="testselect.ts_class"
              :value="testselect.ts_uid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="答案1" :label-width="formLabelWidth">
          <el-input v-model="form.t3_answer1" autocomplete="off" />
        </el-form-item>
        <el-form-item label="答案2" :label-width="formLabelWidth">
          <el-input v-model="form.t3_answer2" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改-->
    <el-dialog v-model="updateDialogVisible" :title="dialogTitle">
      <el-form :model="form">
        <el-form-item label="问卷问题" :label-width="formLabelWidth">
          <el-input v-model="form.t3_context" autocomplete="off" />
        </el-form-item>
        <el-form-item label="问卷类别" :label-width="formLabelWidth">
          <el-select v-model="form.ts_uid" placeholder="选择类别">
            <el-option
              v-for="testselect in classData"
              :key="testselect.ts_uid"
              :label="testselect.ts_class"
              :value="testselect.ts_uid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="答案1" :label-width="formLabelWidth">
          <el-input v-model="form.t3_answer1" autocomplete="off" />
        </el-form-item>
        <el-form-item label="答案2" :label-width="formLabelWidth">
          <el-input v-model="form.t3_answer2" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updateUser">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { ElMessage } from "element-plus";
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        pageInfo: {},
        frmQuery: {
          ts_uid: "",
          t3_context: "",
        },
        formLabelWidth: "140px",
        form: {},
        dialogFormVisible: false, //添加/修改对话框
        tableData: [],
        total: 0, // 数据总数，用于分页
        dialogTitle: "添加问卷信息",
        updateDialogVisible: false,
        classData: [],
      };
    },
    mounted() {
      this.LoadData(); // 加载问卷信息
      this.LoadClassData(); //加载问卷类型
      this.getData(1, 10) //分页
    },
    methods: {
          // 分页
          getData(num, size) {
        this.$http.get("http://localhost:8080/test3/page", {
          params: {
            pageNum: num,
            pageSize: size,
          },
        }
        ).then((response) => {
          this.pageInfo = response.data
          this.tableData = this.pageInfo.list
        }).catch((err) => {
          console.log(err);
        })
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData(this.currentPage, this.pageSize)
        console.log("size", pageSize)
  
      },
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.getData(this.currentPage, this.pageSize)
        console.log("num", pageNum)
  
      },
      btnQuery() {
        console.log(this.frmQuery);
        this.LoadData();
      },
  
      LoadData() {
        this.$http
          .get(
            "http://localhost:8080/test3/list?ts_uid=" +
              this.frmQuery.ts_uid +
              "&t3_context=" +
              this.frmQuery.t3_context
          )
          .then((res) => {
            this.tableData = res.data;
            console.log(res.data);
          })
          .catch((err) => {
            console.log(err);
          });
      },
  
      deleteClick(t3_uid) {
        // 删除操作
        console.log(t3_uid);
        this.$http
          .get("http://localhost:8080/test3/del/" + t3_uid)
          .then((res) => {
            console.log(res.data);
            if (res.data == 1) {
              console.log("删除成功！");
              this.LoadData();
              ElMessage({
                message: "删除成功！",
                type: "success",
              });
            } else {
              console.log("删除失败！");
              ElMessage({
                message: "删除失败！",
                type: "warning",
              });
            }
          })
          .catch((err) => {});
      },
      btnAddDialog() {
        this.form = {}; // 清空表单
        this.dialogTitle = "添加问卷信息";
        this.dialogFormVisible = true;
      },
      addUser() {
        console.log(this.form);
        this.$http
          .post("http://localhost:8080/test3/add", this.form)
          .then((res) => {
            console.log(res.data);
            if (res.data == 1) {
              console.log("添加成功！");
              this.form = {};
              this.dialogFormVisible = false;
              this.LoadData();
              ElMessage({
                message: "添加成功！",
                type: "success",
              });
            } else {
              console.log("添加失败！");
              ElMessage({
                message: "添加失败！",
                type: "warning",
              });
            }
          })
          .catch((err) => {});
      },
      updateUser() {
        console.log(this.form);
        this.$http
          .post("http://localhost:8080/test3/update", this.form)
          .then((res) => {
            console.log(res.data);
            if (res.data == 1) {
              console.log("修改成功！");
              this.form = {}; // 清空表单对象
              this.updateDialogVisible = false; // 关闭修改对话框
              this.LoadData(); // 重新加载数据
              ElMessage({
                message: "修改成功！",
                type: "success",
              });
            } else {
              console.log("修改失败！");
              ElMessage({
                message: "修改失败！",
                type: "warning",
              });
            }
          })
          .catch((err) => {});
      },
      updateDialog(t3_uid) {
        // 编辑操作
        console.log(t3_uid);
        this.$http
          .get("http://localhost:8080/test3/get/" + t3_uid)
          .then((res) => {
            console.log(res.data);
            this.form = res.data;
          })
          .catch((err) => {});
        this.updateDialogVisible = true;
      },
    //   getClass() {
    //     console.log(this.frmQuery.t_class);
    //     this.$http
    //       .get("http://localhost:8080/test/find/" + this.frmQuery.t_class)
    //       .then((res) => {
    //         this.tableData = res.data;
    //         console.log(res.data);
    //       })
    //       .catch((err) => {
    //         console.log(err); /////
    //       });
    //   },
      getContext() {
        console.log(this.frmQuery.t3_context);
        this.$http
          .get("http://localhost:8080/test3/query/" + this.frmQuery.t3_context)
          .then((res) => {
            this.tableData = res.data;
            console.log(res.data);
          })
          .catch((err) => {
            console.log(err); /////
          });
      },
      LoadClassData() {
        ///加载类别信息
        this.$http
          .get("http://localhost:8080/testselect/list")
          .then((res) => {
            this.classData = res.data;
            console.log(res.data);
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
  </script>
  
  <style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .box-card {
    width: 100%;
  }
  </style>